<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小火箭</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      height: 3000px;
      background: skyblue;
    }

    /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar {
      width: 10px;
      /*对垂直滚动条有效*/
      height: 10px;
      /*对水平滚动条有效*/
    }

    /*定义滚动条的轨道颜色、内阴影及圆角*/
    ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
      background-color: #ececec;
      border-radius: 3px;
    }

    /*定义滑块颜色、内阴影及圆角*/
    ::-webkit-scrollbar-thumb {
      border-radius: 7px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
      background-color: rgba(0, 0, 0, .1);
    }

    .rocket {
      width: 148px;
      height: 250px;
      background: url("./rocket.png") no-repeat;
      background-position: 0;
      position: fixed;
      right: 50px;
      bottom: 0;
      display: none;
      cursor: pointer;
    }

    .rocket:hover {
      background-position: -148px 0;
    }

    @keyframes fly {
      from {
        background-position: -298px 0;
      }

      to {
        background-position: -892px 0;
      }
    }

    .active {
      animation: fly 1s steps(4) infinite;
      /* background: linear-gradient(skyblue,pink); */
    }
  </style>
</head>

<body>
  <div class="rocket"></div>
  <script>
    /*
      火箭飞出浏览器的路程 = 火箭的offsetTop+自身高度
      滚动条的路程 = scrollTop
      1s
      速度？-> 单位时间内移动的距离->step 20ms
      1s走完
      20ms移动一次
      总时间1000ms
      火箭的速度 V火 *20*50  = 火箭的路程
      20*50 总时间
      平均速度*时间 = 路程
      火箭的速度*20 = 火箭的路程/50
      */

    // 获取事件源rocket
    var rocket = document.querySelector(".rocket");
    // 火箭的距离浏览器顶部的距离
    var rocket_distance;
    // 火箭的速度
    var rocket_speed;
    // 滚动条的速度
    var scroll_speed;

    // 默认给null,用于记录火箭是否还在继续上升的标志
    var timer = null;

    //绑定火箭点击事件
    rocket.onclick = function () {
      if (timer) return;
      // 点击后给火箭加上喷火动画样式
      rocket.classList.add("active");

      // 火箭距离浏览器顶部的距离:offsetTop+火箭自身高度
      rocket_distance = rocket.offsetTop + rocket.clientHeight;
      // 滚动距离
      var bars_distance = document.documentElement.scrollTop || document.body.scrollTop;
      // 火箭每20ms的上升速度
      rocket_speed = rocket_distance / 50;
      // 滚动条每20ms的速度
      scroll_speed = bars_distance / 50;

      // 创建一个重复执行定时器，每隔20ms让火箭在1s完成上升以及滚动条的倒退。
      timer = setInterval(() => {
        // 每20ms滚动条往回滚动的距离
        document.documentElement.scrollTop -= scroll_speed;
        // 每20ms火箭上升的距离
        rocket.style.top = rocket.offsetTop - rocket_speed + "px";

        // 当滚动距离为0时
        if (document.documentElement.scrollTop === 0) {
          // 清除定时器
          clearInterval(timer);
          // 标志着火箭不再上升，timer赋为null
          timer = null;
          // 将火箭的位置恢复为默认位置
          rocket.style.top = "";
          // 移除火箭喷火动画样式
          rocket.classList.remove("active");
          // 隐藏火箭
          rocket.style.display = "none";
        }
      }, 20)

    }

    // 监听页面滚动
    document.onscroll = function () {
      //获取滚动的距离
      var rolling_distance = document.documentElement.scrollTop || document.body.scrollTop;
      if (rolling_distance >= 500) {
        // 当滚动的距离大于等于300时显示火箭
        rocket.style.display = "block";

        document.body.style.backgroundImage = "linear-gradient(skyblue,pink)";
      } else {
        // 滚动的距离小于300时，隐藏火箭
        rocket.style.display = "none";
        document.body.style.backgroundColor = "";
      }


      // timer如果返回一个id,表明火箭还在上升
      if (timer) {
        // 不隐藏火箭，解决由于滚动条的距离小于300时，火箭未到达浏览器顶部提前隐藏问题。
        rocket.style.display = "block";
      }
    }

  </script>
</body>

</html>